<script setup lang="ts">
import { getCurrentInstance, ref, reactive, onBeforeMount, nextTick } from 'vue'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
const { proxy } = getCurrentInstance()

/* ---- */
const WXConfig = proxy.$Store.get('WXConfig') || {}

/* ---- */
const user = reactive({
  info: '识码浏览我的移动门店',
  company: '',
  desc: '',
  avatar: '',
  // ----
  title: '',
  // ----
  share_title: proxy.$shareTitle,
  share_desc: proxy.$shareDesc,
  share_icon: proxy.$shareIcon
})
const QR = reactive({
  url: '',
  // ----
  show: false,
  text: '',
  size: 500,
  logoSrc: '',
  logoScale: 0.15,
  logoMargin: 5
})
const forRoute = proxy.$root.$router.options.routes || []

/* ---- */
const layer = ref()

/* ---- */
const setAppTitle = (title) => {
  document.title = title
  // --利用iframe的onload事件刷新页面--
  const iframe = document.createElement('iframe')
  iframe.style.visibility = 'hidden'
  iframe.style.width = 0
  iframe.style.height = 0
  document.body.appendChild(iframe)
  nextTick(() => { document.body.removeChild(iframe) })
}
// --设置微信分享--
const setWebShare = (info) => {
  const forSn = proxy.$Store.get('SN')
  const currentUrl = window.location.href.split('#')[0]
  const shareLink = (Number(currentUrl.indexOf('sn=')) === Number(-1)) ? ((Number(currentUrl.indexOf('?')) === Number(-1)) ? currentUrl + '?sn=' + forSn : currentUrl + '&sn=' + forSn) : currentUrl
  proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
    if (!obj) return
    // ----
    obj.hideMenuItem()
    obj.showMenuList(['menuItem:share:appMessage', 'menuItem:share:timeline', 'menuItem:share:qq', 'menuItem:share:weiboApp', 'menuItem:favorite', 'menuItem:share:QZone'])
    // ----
    obj.share({
      title: info.title,
      desc: info.desc,
      link: shareLink,
      imgUrl: info.imgUrl
    })
  })
}
// ----
const findElementInArray = async (arr, target) => {
  for (let i = 0; i < Number(arr.length); i++) {
    if (String(arr[i].name) === String(target)) {
      QR.url = arr[i].path
      break
    } else if (Array.isArray(arr[i].children)) {
      await findElementInArray(arr[i].children, target)
    }
  }
}
// ----
const getCurrencyInfo = async () => {
  await findElementInArray(forRoute, 'ForMall')
  // --获取用户信息--
  const forUserData = { params: { 'DealerSearch[id]': proxy.$route.query.dealer_id } }
  await proxy.$Axios.all([
    proxy.$Axios.get('dealer/index', forUserData)
  ]).then(proxy.$Axios.spread((userData) => {
    const UData = userData.items[0] || {}
    user.company = proxy.$Myfun.setText(UData.name)
    user.desc = proxy.$Myfun.setText(UData.remark)
    proxy.$Myfun.getJsonData(UData.avatar, (resJson) => {
      if (Number(resJson.length) > 0) {
        user.avatar = resJson[0].image
        user.share_icon = resJson[0].image
      }
    })
    proxy.$Myfun.getJsonData(UData.ads_content, (resJson) => {
      if (resJson[0].name) user.title = proxy.$Myfun.setText(resJson[0].name)
    })
    if (UData.name) user.share_title = proxy.$Myfun.setText(UData.name)
    if (UData.remark) user.share_desc = proxy.$Myfun.setText(UData.remark)
  })).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  // ----
  const isSlash = (Number(QR.url.indexOf('/')) === -1) ? '/' : ''
  let qrUrl = isSlash + QR.url
  qrUrl += '?dealer_id=' + proxy.$route.query.dealer_id + '&sn=' + proxy.$Store.get('SN')
  qrUrl = proxy.$siteSrc + qrUrl
  // ----
  QR.text = qrUrl
  QR.logoSrc = user.avatar
  // ----
  nextTick(() => { QR.show = true })
  // --设置网页title--
  const forTitle = user.title || document.title
  setAppTitle(forTitle)
  // --设置微信分享信息--
  const forShare = {
    title: user.share_title,
    desc: user.share_desc,
    imgUrl: user.share_icon
  }
  setWebShare(forShare)
}

/* ---- */
onBeforeMount(() => {
  getCurrencyInfo()
})
</script>

<template>
  <div>
    <div class="xw-section">
      <div class="user-qr xw-middle-abs xw-bg-white xw-radius-3">
        <div class="UQR-user xw-flex xw-flex-align" v-if="user.avatar || user.company || user.desc">
          <div class="UQR-ava xw-radius-3" v-if="user.avatar"><img :src="user.avatar"/></div>
          <div class="xw-flex-W1" v-if="user.company ||user.desc">
            <div class="UQR-title xw-ellipsis" v-if="user.company">{{user.company}}</div>
            <div class="UQR-desc xw-color-13 xw-ellipsis-2" v-if="user.desc">{{user.desc}}</div>
          </div>
        </div>
        <div class="UQR-con" v-if="QR.show">
          <div class="UQR-img"><vue-qr :logoSrc="QR.logoSrc" :text="QR.text" :size="QR.size" :logoMargin="QR.logoMargin" :logoScale="QR.logoScale"></vue-qr></div>
          <div class="UQR-info">{{user.info}}</div>
        </div>
      </div>
    </div>
    <layer-view ref="layer"/>
  </div>
</template>

<style scoped>
/* ---- */
.user-qr { padding: 1.2rem; width: 90%; }
.UQR-ava { margin-right: 1rem; width: 7rem; height: 7rem; }
.UQR-ava img { width: 100%; }
.UQR-title { line-height: 2.5rem; font-size: 1.7rem; }
.UQR-desc { margin: 0.5rem 0 0; line-height: 2rem; }
.UQR-con { margin: 1rem 0 0; }
.UQR-img img { width: 100%; }
.UQR-info { padding: 1rem 0; text-align: center; }

/* ---- */
.forTab { padding: 0 1rem; height: 5rem; overflow: hidden; }
.forTab .xw-flex-W1 { text-align: center; font-size: 1.5rem; color: #ffffff; border-radius: 0.8rem 0.8rem 0 0; }
.forTab .xw-flex-W1 span { margin-top: 0.5rem; }
.forTab .xw-flex-W1.active { margin: 0.5rem 0 0; background: var(--bgColor); font-size: 1.6rem; color: #ff5722; }
.forTab .xw-flex-W1.active span { margin-top: 0; }
</style>
